<template>
	<view class="container">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box" @click="open">
			<input class="ser-input" type="text" value="输入关键字搜索" />
		</view>
		<!-- #endif -->
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<view class="titleNview-background">
				<image src="/static/img/1/6.png" mode="scaleToFill"></image>
			</view>
			<swiper class="carousel" circular @change="swiperChange" autoplay>
				<swiper-item v-for="(item, index) in carouselList" :key="index" @click="getItem(item)" class="carousel-item">
					<image :src="item.image" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<!-- 	<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view> -->
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item" @click="optimization(item)" v-for="(item,index) in cateList" :key="item.id" v-if="index<5">
				<image :src="item.fullImageUrl" mode="aspectFit"></image>
				<text>{{item.cName}}</text>
			</view>
			<!-- 	<view class="cate-item">
				<image src="/static/img/1/33.png" mode="widthFix"></image>
				<text>海鲜水产</text>
			</view>
			<view class="cate-item">
				<image src="/static/img/1/121.png" mode="widthFix"></image>
				<text>精选肉类</text>
			</view>
			<view class="cate-item">
				<image src="/static/img/1/98.png" mode="widthFix"></image>
				<text>异国风味</text>
			</view>
			<view class="cate-item">
				<image src="/static/img/1/122.png" mode="widthFix"></image>
				<text>优选饮食</text>
			</view> -->
		</view>
		<!-- 今日优选 -->
		<view class="seckill-section m-t" v-for="items in tagList" :key="items.tag_id">
			<view class="s-header">
				<text class="title">{{items.tag_name}}</text>

			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(item, index) in items.goodslist" :key="index" class="floor-item" @click="navToDetailPage(item.id)"
					 v-if="index<8">
						<image :src="item.fullDefaultImageUrl" mode="aspectFill" class="bac-index"></image>
						<!-- <text class="new">新品上市</text> -->
						<text class="title clamp">{{item.cName}}</text>
						<text class="price"><text class="unit">￥</text>{{item.fSalePrice}}</text>
					</view>
					<view class="floor-item">
						<text class="look-more" @click="recommend(items)">查看更多&gt;</text>
					</view>

				</view>
			</scroll-view>
		</view>
		<!-- 活动优惠 -->
		<view class="activity">
			<view class="s-header" @click="discount">
				<text class="title">活动优惠</text>

				<text class="right">更多&gt;</text>
			</view>
			<view class="goods-box">
				<view class="left">
					<view class="top" @click="seckill" v-if="miaosha.length>0">
						<text class="timer">{{times}}</text>
						<image :src="miaosha[0].image" mode="aspectFill"></image>
					</view>
					<view class="bottom" v-if="cuxiao.length>0">
						<view class="title">
							<text class="tip">{{cuxiao[0].pName}}</text>
							<text class="num"></text>
						</view>
						<image :src="cuxiao[0].image" mode="aspectFill"></image>
					</view>
				</view>
				<view class="right">
					<view class="top" @click="tao" v-if="taocan.length>0">
						<text class="timer">{{taocan[0].name}}</text>
						<image :src="taocan[0].image" mode="aspectFill"></image>
					</view>
					<view class="bottom" @click="tuan(tuangou[0])" v-if="tuangou.length>0">
						<text class="timer">{{tuangou[0].name}}</text>
						<image :src="tuangou[0].image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- Top单品 -->
		<!-- <view class="seckill-section m-t top-goods">
			<view class="s-header" >
				<text class="title">TOP单品</text>

			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(item, index) in topGoods" :key="item.id" class="floor-item" @click="navToDetailPage(item.id)" v-if="index<8">
						<image :src="item.fullDefaultImageUrl" mode="aspectFill" class="white-img"></image>
						<image class="ranking" :src="rankingList[index].src" mode="aspectFill"></image>
						<text class="title clamp">{{item.cName}}</text>
						<text class="price"><text class="unit">￥</text>{{item.fSalePrice}}</text>
					</view>
					<view class="floor-item">
						<text class="look-more" @click="top">查看更多&gt;</text>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<!-- 热门专题 -->
		<view class="carousel-section hot-tip">
			<view class="s-header">
				<text class="title">热门专题</text>
				<view class="right">
					<text class="num">{{swiperCurrent2+1}}</text>
					<text class="sign">|</text>
					<text class="nums">{{swiperLength2}}</text>
				</view>

			</view>
			<swiper class="carousel" circular @change="swiperChange2" next-margin="150upx">
				<swiper-item @click="link(item.id)" v-for="(item, index) in zhuanti" :key="item.id" class="carousel-item">
					<image :src="item.cover_image" />
					<view class="title clamp">{{item.name}}</view>
					<view class="desc clamp">墙头累累柿子黄，人家秋获争登场</view>
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->

		</view>

		<!-- 新鲜好物 -->


		<!-- 即将上线 -->

		<!-- 优鲜水果 -->
		<view class="seckill-section classify" v-for="cate in cateList" :key="cate.id">
			<view class="s-header">
				<image :src="cate.image"></image>
				<view class="po-name">
					<text class="title">{{cate.cName}}</text>
					<text class="underline"></text>
					<!-- <text class="English">Fresh Fruit</text> -->
				</view>
		
		
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(item, index) in cate.goodsList" :key="index" class="floor-item" @click="navToDetailPage(item.pid)" v-if="index<8">
						<image :src="item.defaultAlbum" mode="aspectFill"></image>
						<!-- <text class="new"></text> -->
						<text class="title clamp">{{item.cProductShowName}}</text>
						<text class="price"><text class="unit">￥</text>{{item.fSalePrice}}</text>
					</view>
					<view class="floor-item">
						<text class="look-more" @click="navToList(cate,cateList)">查看更多&gt;</text>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="more">更多</view> -->
		</view>


		<!-- 线下门店 -->
		<view class="carousel-section hot-tip">
			<view class="s-header" @click="under">
				<text class="title">线下门店</text>
				<view class="right">
					<text class="num">{{swiperCurrent5+1}}</text>
					<text class="sign">|</text>
					<text class="nums">{{swiperLength5}}</text>
				</view>

			</view>
			<swiper class="carousel" circular @change="swiperChange5" next-margin="150upx">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.src" />
					<view class="title clamp">灯笼下的柿子</view>
					<view class="desc clamp">墙头累累柿子黄，人家秋获争登场</view>
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->

		</view>

		<Guess :goods_id_exclude='goods_id_exclude' :categoryid='categoryid' :type='type' v-if="goods_id_exclude.length>0&&categoryid.length>0"></Guess>
		<uni-popup ref="popup">
			<button open-type="getUserInfo" @getuserinfo="onGotUserInfo">获取授权</button>
		</uni-popup>
	</view>
</template>

<script>
	import Guess from "../../components/like/guess.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			Guess,
			uniPopup
		},
		data() {
			return {
				titleNViewBackground: 'rgb(0, 0, 0)',
				swiperCurrent: 0,
				swiperCurrent2: 0,
				swiperCurrent3: 0,
				swiperCurrent4: 0,
				swiperCurrent5: 0,
				swiperLength: 3,
				swiperLength2: 3,
				swiperLength3: 3,
				swiperLength4: 3,
				swiperLength5: 3,
				carouselList: [{
						src: "/static/img/1/55.png",
						background: "rgb(0, 0, 0)",
					},
					{
						src: "/static/img/1/55.png",
						background: "rgb(0, 0, 0)",
					},
					{
						src: "/static/img/1/55.png",
						background: "rgb(0, 0, 0)",
					},
				],
				goodsList: [],
				rankingList: [{
						src: "/static/img/1/14.png"
					}, {
						src: "/static/img/1/15.png"
					}, {
						src: "/static/img/1/16.png"
					}, {
						src: "/static/img/1/16.png"
					}, {
						src: "/static/img/1/16.png"
					}, {
						src: "/static/img/1/16.png"
					}


				],
				today: [],
				cateList: [],
				goods_id_exclude: [],
				categoryid: [],
				type: 0,
				promotionList: [],
				miaosha: {},
				tuangou: {},
				cuxiao: {},
				taocan: {},
				timer: null,
				times: '00:00:00',
				decorate: {},
				freshGoods: [], //新鲜好物
				topGoods: [], //top
				readyGoods: [], //即将上线
				zhuanti: [],
				tagList: []
			};
		},

		onLoad(options) {
			
			this.loadData();
		},

		methods: {
			open(){
				this.$refs.popup.open()
			},
			onGotUserInfo() {
				let that = this
				uni.getUserInfo({
					// 获取信息成功
					success(resp) {

						// 成功后进行登录,获取code
						uni.login({
							success(res) {
								console.log(res);
								if (res.code) {
									//发起网络请求
									let loginData = {
										code: res.code,
										username:resp.userInfo.nickName
										// encryptedData: resp.encryptedData,
										// iv: resp.iv
									}
									that.$Request.post4(that.$api.httpApi.login.uLogin, loginData).then(res => {
										if (res.code == 1) {
											that.$SysCache.put('token',res.data.token,43200)
											that.$SysCache.put('open_id',res.data.open_id,43200)
											that.$SysCache.put('userInfo',res.data.user,43200)
										}
									})
								} else {
									console.log('登录失败！' + res.errMsg)
								}
							}
						})
					},
					fail() {
						console.log("获取用户信息失败");
					}
				})
			},
			loadData() {
				//根据标签id获取商品
				
				this.$Request.post4(
					this.$api.httpApi.home.getTag, {}
				).then(res => {
					if (res.code == 1) {
						this.tagList = res.data
						this.tagList.forEach(item => {
							this.$Request.get(this.$api.httpApi.home.getProductIdByTagIds + "&token=" + this.$SysCache.get('token') +
								'&tagId=' + item.tag_id).then(res => {
								if (res.code == 200) {
									this.getGoods(item, res.data)
								}
							})
						})
					}
				})

				// this.$Request.get(this.$api.httpApi.home.getProductIdByTagId + "&token=" + this.$SysCache.get('token')).then(res => {
				// 	if (res.code == 200) {
				// 		this.goods_id_exclude = res.data

				// 		this.getToday(res.data)
				// 	}
				// })
				// //新鲜好物
				// this.$Request.get(this.$api.httpApi.home.getProductIdByTagId2 + "&token=" + this.$SysCache.get('token')).then(res => {
				// 	if (res.code == 200) {
				// 		// this.freshGoods = res.data
				// 		this.getGoods(res.data,2)
				// 	}
				// })
				// //top单品
				// this.$Request.get(this.$api.httpApi.home.getProductIdByTagId3 + "&token=" + this.$SysCache.get('token')).then(res => {
				// 	if (res.code == 200) {
				// 		// this.freshGoods = res.data
				// 		this.getGoods(res.data,3)
				// 	}
				// })
				// //即将上线
				// this.$Request.get(this.$api.httpApi.home.getProductIdByTagId4 + "&token=" + this.$SysCache.get('token')).then(res => {
				// 	if (res.code == 200) {
				// 		// this.freshGoods = res.data
				// 		// this.swiperCurrent3 =1
				// 		this.swiperLength3 = res.data.length
				// 		this.getGoods(res.data,4)
				// 	}
				// })
				//活动列表
				this.$Request.get(this.$api.httpApi.home.getPricePreferentialList + "&token=" + this.$SysCache.get('token')).then(
					res => {
						if (res.code == 200) {
							this.activity = res.data
						}
					})
				//分类
				this.$Request.get(
					this.$api.httpApi.cate.cate + "&token=" + this.$SysCache.get('token')

				).then(res => {
					if (res.code == 200) {
						this.cateList = res.data

						res.data.forEach(item => {
							this.categoryid.push(item.id)
							this.getcateImg(item)

						})
					}
				})

				//分类banner
				this.$Request.post4(
					this.$api.httpApi.home.banner, {
						"category_id": 1
					}
				).then(res => {
					if (res.code == 1) {
						this.carouselList = res.data

					}
				})
				//热门专题
				this.$Request.post4(
					this.$api.httpApi.special.topic, {
						limit: 10,
						page: 1
					}
				).then(res => {
					if (res.code == 1) {
						this.zhuanti = res.data.data
						// this.swiperCurrent2 = res.data.current_page
						this.swiperLength2 = res.data.total

					}
				})

				this.getPromotionList(1)

				this.getPromotionList(2)

				this.getPromotionList(4)

				this.getPromotionList(7)




			},
			async getPromotionList(type) {
				this.$Request.post4(
					this.$api.httpApi.promotion.getPricePreferentialList, {
						"type": type
					}
				).then(res => {
					if (res.code == 200) {
						switch (type) {
							case 1:
								this.miaosha = res.data.data
								if (this.miaosha.length > 0) {
									this.timeDown()
								}

								this.getsrc(this.miaosha, type)
								break;
							case 2:
								this.tuangou = res.data.data
								this.getsrc(this.tuangou, type)
								break;
							case 4:
								this.cuxiao = res.data.data
								this.getsrc(this.cuxiao, type)
								break;
							case 7:
								this.taocan = res.data.data
								this.getsrc(this.taocan, type)
								break;
						}

					}
				})
			},
			getsrc(a, str) {
				this.$Request.post4(
					this.$api.httpApi.home.preferentialAds, {

					}
				).then(res => {
					if (res.code == 1) {
						this.decorate = res.data

						for (const i of res.data) {
							if (i.type == str) {
								if (a.length > 0) {
									this.$set(a[0], "image", i.image)
								}

							}
						}

					}
				})





			},
			timeDown() { // 倒计时

				clearInterval(this.timer);
				var starttime = new Date(this.miaosha[0].pStartDate.replace(/-/g, "/")) / 1000;
				var nowDate = Math.round(new Date() / 1000); // 当前时间
				//var endtime = Number(this.initActiveMsgObj.end_time); 
				var endtime = new Date(this.miaosha[0].pEndDate.replace(/-/g, "/")) / 1000;
				// endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
				if (endtime < nowDate) {
					return
				}


				var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
				//天数
				var days = Math.floor(totalSeconds / (60 * 60 * 24));
				//取模（余数）
				var modulo = totalSeconds % (60 * 60 * 24);
				//小时数
				var hours = Math.floor(modulo / (60 * 60));
				hours = hours < 10 ? ('0' + hours) : hours;
				modulo = modulo % (60 * 60);
				//分钟
				var minutes = Math.floor(modulo / 60);
				minutes = minutes < 10 ? '0' + minutes : minutes;
				//秒
				var seconds = modulo % 60;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				//输出到页面
				this.times = hours + ':' + minutes + ':' + seconds;
				//if(totalSeconds <= 0){
				if (totalSeconds <= 60) {
					clearInterval(this.timer);
					// window.location.reload()
				} else {
					this.timer = setInterval(this.timeDown, 1000);
				}
			},
			getToday(item, val) {
				this.today = []

				for (const i in val) {

					this.$Request.get(this.$api.httpApi.goods.iteminfo + '&id=' + val[i] + '&token=' + this.$SysCache.get('token')).then(
						res => {
							if (res.code == 200) {

								this.today.push(res.data)
								this.$SysCache.put('today', this.today, 864000)
							}
						})

				}

			},
			getGoods(item, str) {
				this.freshGoods = []
				let data = []

				for (const i in str) {

					this.$Request.get(this.$api.httpApi.goods.iteminfo + '&id=' + str[i] + '&token=' + this.$SysCache.get('token')).then(
						res => {
							if (res.code == 200) {
								data.push(res.data)

							}
						})

				}
				this.$set(item, "goodslist", data)


			},
			getcateImg(item) {
				let id = item.id
				this.getcateGoods(item)
				this.$Request.post4(
					this.$api.httpApi.cate.categoryBanner, {
						"class_id": id
					}
				).then(res => {
					if (res.code == 1) {
						if (res.data == null) {
							this.$set(item, "image", '')
						} else {
							this.$set(item, "image", res.data.images_first)
						}



					}
				})
			},
			getcateGoods(item) {
				let id = item.id
				this.$Request.post(
					this.$api.httpApi.search.search + "&token=" + this.$SysCache.get('token'), {
						queryCondition: {
							order: {
								fieldname: "iOrder",
								direction: "asc"
							},
							pageindex: 1,
							pagesize: 12,
							where: [{
								fieldname: "categoryid",
								valuefrom: id
							}]
						}
					}
				).then(res => {
					if (res.code == 200) {

						this.$set(item, "goodsList", res.data.data)


					}
				})
			},
			GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r !== null)
					return unescape(r[2]);
				return null;
			},

			link(id) {
				uni.navigateTo({
					url: `/pages/special/detial?id=${id}`
				})

			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			swiperChange2(e) {
				const index = e.detail.current;
				this.swiperCurrent2 = index;
			},
			swiperChange3(e) {
				const index = e.detail.current;
				this.swiperCurrent3 = index;
			},
			swiperChange4(e) {
				const index = e.detail.current;
				this.swiperCurrent4 = index;
			},
			swiperChange5(e) {
				const index = e.detail.current;
				this.swiperCurrent5 = index;
			},
			//详情页
			navToDetailPage(id) {
				//测试数据没有写id，用title代替
				// let id = item.id;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			top(id) {
				uni.navigateTo({
					url: `/pages/inner/top?id=${id}`
				})
			},
			seckill() {
				this.$SysCache.put('itemData', this.miaosha[0], 864000)
				uni.navigateTo({
					url: `/pages/inner/seckill`
				})
			},
			tao() {

				// uni.navigateTo({
				// 	url: `/promotion/setMeal/index`
				// })
			},
			tuan(data) {
				this.$SysCache.put('itemData', data, 864000)
				uni.navigateTo({
					url: `/promotion/assemble/fresh`
				})
			},
			discount() {
				uni.navigateTo({
					url: `/pages/inner/discount`
				})
			},
			under() {
				uni.navigateTo({
					url: `/pages/inner/undershop`
				})
			},

			advance() {
				uni.navigateTo({
					url: `/pages/inner/advance`
				})
			},
			optimization(cate) {
				this.$SysCache.put('cate', cate, 864000)
				uni.navigateTo({
					url: `/pages/inner/optimization`
				})
			},
			recommend(item) {

				if (item.tag_name == "TOP单品") {
					this.top(item.tag_id)
				} else {
					uni.navigateTo({
						url: `/pages/inner/fresh?id=1521229690507520&name=${item.tag_name}`
					})
				}

			},
			fresh(name) {
				uni.navigateTo({
					url: `/pages/inner/fresh?id=1674243972485376&name=${name}`
				})
			},
			online(name) {
				uni.navigateTo({
					url: `/pages/inner/fresh?id=1674244632400128&name=${name}`
				})
			},
			navToList(item, items) {
				let id = item.id
				let name = item.cName
				this.$SysCache.put("cateData", items, 864000)
				uni.navigateTo({
					url: `/pages/cate/cateList?categoryid=${id}&name=${name}`
				})
			},
			getItem(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: `/pages/detail/index?id=${item.redirect_id}`
					})
				} else if (item.type == 3) {
					uni.navigateTo({
						url: `/pages/special/detial?id=${item.redirect_id}`
					})
				} else if (item.type == 4) {
					window.location.href = item.url
				}
			}
		},
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			uni.navigateTo({
				url: `/pages/search/search`
			})
		},
		onNavigationBarButtonTap: async function(e) {
			if (e.redDot) {
				uni.navigateTo({
					url: `/pages/user/msgoder`
				})
			}
		}

	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box {
		position: absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;

		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
			border-radius: 20px;
			background: rgba(255, 255, 255, .6);
		}
	}

	page {
		.cate-section {
			position: relative;
			z-index: 5;
			border-radius: 16upx 16upx 0 0;
			margin-top: -20upx;
		}

		.carousel-section {
			padding: 0;

			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}


			.carousel {

				.carousel-item {
					padding: 0;
				}
			}

			.swiper-dots {
				left: 45upx;
				bottom: 40upx;
			}
		}
	}

	/* #endif */


	page {
		background: #f5f5f5;
	}

	.m-t {
		margin-top: 16upx;
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			// padding-top: 44px;
			box-sizing: content-box;

		}


		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 184upx;
			transition: .4s;

			image {
				width: 100%;
				height: 100%;
			}

		}
	}

	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 26upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;

		// background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 23upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);

			image {
				width: 92upx;
				height: 90upx;
			}
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 90upx;
			// height: 65upx;
			margin-bottom: 14upx;
			// border-radius: 50%;
			// opacity: .7;
			// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	.ad-1 {
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/* 今日优选 */
	.seckill-section {
		padding: 4upx 30upx 24upx;

		// background: #fff;
		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.title {
				font-size: 27upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			margin-right: 26upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			width: 250upx;
			line-height: 1.8;
			border-radius: 6upx;
			position: relative;

			.bac-index {
				height: 250upx;
				width: 250upx;
			}

			.look-more {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 250upx;
				width: 250upx;
				background: #f0f0f0;
				box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
				color: #666;
			}

			.white-img {
				height: 250upx;
				width: 250upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

			}

			.title {
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(68, 68, 68, 1);
				font-size: 23upx;
			}

			.price {
				font-size: 26upx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: rgba(240, 64, 111, 1);
			}

			.new {
				position: absolute;
				top: 0;
				left: 0;
				width: 98upx;
				height: 32upx;
				background: rgba(77, 200, 151, 1);
				font-size: 17upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 32upx;
			}

			.ranking {
				position: absolute;
				top: 14upx;
				left: 13upx;
				width: 43upx;
				height: 43upx;
				background: transparent !important;
			}
		}
	}



	/* 活动优惠 */
	.activity {
		padding: 4upx 30upx 24upx;

		// background: #fff;
		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.title {
				font-size: 27upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.right {
				flex: 1;
				text-align: right;
				font-size: 19upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
			}

		}

		.goods-box {
			display: flex;

			.left {
				width: 385upx;
				margin-right: 20upx;
				display: flex;
				flex-wrap: wrap;

				.top {
					width: 100%;
					height: 439upx;
					margin-bottom: 17upx;
					position: relative;

					.timer {
						font-size: 40upx;
						font-weight: bold;
						width: 100%;
						height: 82upx;
						background: rgba(23, 23, 23, 1);
						display: inline-flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						position: absolute;
						z-index: 1;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.bottom {
					width: 100%;
					height: 206upx;
					position: relative;

					.title {
						position: absolute;
						top: 41upx;
						left: 38upx;
						z-index: 1;

						.tip {
							font-size: 23upx;
							font-weight: bold;
							color: #333;
							display: block;
						}

						.num {
							display: block;
							font-size: 32upx;
							font-weight: bold;
							color: #333;
						}
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.right {
				width: 303upx;
				display: flex;
				flex-wrap: wrap;

				.top {
					width: 100%;
					height: 329upx;
					margin-bottom: 24upx;
					position: relative;

					.timer {
						font-size: 26upx;
						font-weight: bold;
						color: #333;
						position: absolute;
						top: 38upx;
						left: 40upx;
						z-index: 1;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.bottom {
					width: 100%;
					height: 308upx;
					position: relative;

					.timer {
						font-size: 23upx;
						font-weight: bold;
						color: #333;
						position: absolute;
						top: 38upx;
						left: 40upx;
						z-index: 1;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	/*热门专题*/
	.hot-tip {
		padding: 4upx 30upx 24upx;

		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.title {
				font-size: 27upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.right {
				flex: 1;
				text-align: right;
				font-size: 19upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				position: relative;
				float: right;

				.num {
					position: absolute;
					top: -6upx;
					right: 10upx;
					font-size: 14upx;
					font-weight: bold;
				}

				.sign {
					position: absolute;
					right: 5upx;
					transform: rotate(60deg);
				}

				.nums {
					position: absolute;
					bottom: -36upx;
					right: -8upx;
					font-size: 26upx;
					font-weight: bold;
				}
			}

		}

		.carousel {
			height: 417upx;

			.carousel-item {
				padding: 0;
				overflow: hidden;
				padding-right: 23upx;
				position: relative;

				.title {
					font-size: 25upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(68, 68, 68, 1);
				}

				.desc {
					font-size: 19upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(119, 119, 119, 1);
				}

				image {
					height: 333upx;
					border-radius: 0;
				}

				.cover {
					position: absolute;
					top: 47upx;
					left: 32upx;

					.title {
						display: block;
						font-size: 32upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #fff;
						line-height: 1;
					}

					.English {
						display: block;
						font-size: 20upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #fff;
						margin-top: 10upx;
						line-height: 1;
					}

					.timer {
						display: block;
						font-size: 45upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #fff;
						margin-top: 18upx;
						line-height: 1;
					}

					.btn {
						width: 124upx;
						height: 42upx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20upx;
						color: #fff;
						border-radius: 30upx;
						border: 1px solid #fff;
						margin-top: 66upx;
					}
				}
			}



		}
	}

	/*分类展示*/
	.classify {
		.s-header {
			display: flex;
			align-items: center;
			height: 192upx;
			line-height: 1;
			margin-bottom: 31upx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.po-name {
				position: absolute;
				top: 29upx;
				left: 46upx;

				.title {
					display: block;
					font-size: 30upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #fff;
					line-height: 1;
				}

				.underline {
					display: block;
					height: 2upx;
					width: 15upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #fff;
					line-height: 1;
					background: #fff;
					margin: 5upx 0;
				}

				.English {
					display: block;
					font-size: 20upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #fff;
					line-height: 1;
				}
			}
		}

		.floor-item {
			margin-right: 26upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			width: 219upx;
			line-height: 1.8;
			border-radius: 6upx;
			position: relative;

			.look-more {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 219upx;
				width: 219upx;
				background: #f0f0f0;
				box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
			}

			image {
				height: 219upx;
				width: 219upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

			}
		}

		.more {
			// width:708upx;
			height: 20upx;
			background: rgba(8, 4, 4, 1);
			margin: 20upx auto;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 17upx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			padding-right: 52upx;
			line-height: 1;
		}

	}
</style>
